<style lang='scss' scoped>
.login {
  margin-top: 1rem;
  .container {
    position: relative;
    .swiper-slide {
      width: 9.375rem !important;
      height: 3.825rem !important;
    }
    img {
      width: 100%;
      height: 3.825rem;
      display: block;
    }
  }
  .center {
    padding: 0.5rem;
    .conter {
      width: 4.075rem;
      .message {
        margin-bottom: 0.125rem;
        cursor: pointer;
        p {
          text-align: left;
          font-size: 0.375rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          padding: 0 0.21rem;
          line-height: 0.75rem;
        }
        .title{
          font-size: 0.4rem;
          font-weight: bold;
        }
        .rig {
          float: right;
          position: relative;
          top: -0.1rem;
          text-align: right;
          em {
            font-size: 0.75rem;
            font-style: normal;
            color: rgba(255, 255, 255, 1);
          }
        }
        i {
          display: inline-block;
          margin: 0 25%;
          margin-top: 15%;
        }
        .icon-1 {
          background: url(../../static/img/icon-powermessage.png) no-repeat;
          background-size: 100% 100%;
          width: 1.575rem;
          height: 1.4rem;
          margin-top: 9%;
        }
        .icon-2 {
          background: url(../../static/img/icon-notice.png) no-repeat;
          background-size: 100% 100%;
          width: 0.95rem;
          height: 0.825rem;
        }
        .icon-3 {
          background: url(../../static/img/icon-messagesend.png) no-repeat;
          background-size: 100% 100%;
          width: 0.95rem;
          height: 0.95rem;
        }
        .icon-4 {
          background: url(../../static/img/icon-monitormessage.png) no-repeat;
          background-size: 100% 100%;
          width: 1.575rem;
          height: 1.1rem;
        }
      }
      .title {
        text-align: center !important;
        
      }
      .message_bg1 {
        background: url(../../static/img/message_bg1.png);
        background-size: 100% 100%;
        height: 4.75rem;
         position: relative;
      }
      .message_bg2 {
        background: url(../../static/img/message_bg2.png);
        background-size: 100% 100%;
        height: 3.625rem;
      }
      .message_bg3 {
        background: url(../../static/img/message_bg4.png);
        background-size: 100% 100%;
        height: 3.625rem;
      }
      .message_bg4 {
        background: url(../../static/img/message_bg5.png);
        background-size: 100% 100%;
        height: 4.75rem;
        position: relative;
      }    
      
      .message_bg4 {
        .title {
          margin-top: 0.25rem;
        }
      }
      .message_bg1 .title{
        margin-top: 0.1rem;
      }
    }
    .center_left {
      float: left;
    }
    .center_right {
      float: right;
    }
  }
  .plants-header {
    background: url(../../static/img/power-heads.png) no-repeat;
    background-size: 100% 100%;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: 0.45rem;
    color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
    .back-icon {
      position: absolute;
      left: 0.5rem;
      top: 0;
      line-height: 1rem;
      cursor: pointer;
      i {
        display: inline-block;
        width: 0.3rem;
        height: 0.5rem;
        background: url("../../static/img/back-icon.png") no-repeat;
        background-size: 100% 100%;
        vertical-align: middle;
        margin-right: 0.375rem;
      }
      span {
        font-size: 0.7rem;
        color: #fff;
      }
    }
    .more-icon {
      position: absolute;
      right: 0.5rem;
      top: 50%;
      margin-top: -0.1rem;
      width: 1rem;
      height: 0.2rem;
      cursor: pointer;
    }
  }
}
</style>
<template>
    <div class="login">
      <div class="plants-header">
          <div class="back-icon" @click="goback">
              <i></i>
          </div>
          水电站
      </div>
      <div class="container">
          <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide>
                 <img src="../../static/img/swiper-img1.png">
            </swiper-slide>
            <swiper-slide>
                 <img src="../../static/img/swiper-img2.png">
            </swiper-slide>
            <swiper-slide>
                 <img src="../../static/img/swiper-img3.png">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
      </div>
      <div class="center fn-clear">
            <div class="conter center_left">
                <div class="message message_bg1" @click="entranceBtn1">
                    <i class="icon-1"></i>
                    <p class="title">电站信息</p>
                    <p><span class="lef">电站总数</span><span class="rig"><em>{{indexList.empNum}}</em>座</span></p>
                    <p><span class="lef">装机容量</span><span class="rig" style="position: absolute;top: 3.41rem;right: .2rem;"><em>{{indexList.comCapacitySum}}</em>MW</span></p>
                </div>
                <div class="message message_bg2"  @click="entranceBtn2">    
                    <i class="icon-2"></i>
                    <p class="title">通知公告</p>
                    <p><span class="lef">总条数</span><span class="rig"><em>{{indexList.noticeNum}}</em>条</span></p>
                </div>
            </div>
            <div class="conter center_right">
                <div class="message message_bg4"  @click="entranceBtn4">    
                    <i class="icon-4"></i>
                    <p class="title">监测信息</p>
                    <p><span class="lef">已监测电站</span><span class="rig"><em>{{indexList.monitorNum}}</em>座</span></p>
                    <p><span class="lef">预警电站</span><span class="rig" style="position: absolute;top: 3.41rem;right: .2rem;;"><em>{{indexList.warningNum}}</em>座</span></p>
                </div>
                <div class="message message_bg3"  @click="entranceBtn3">  
                    <i class="icon-3"></i>
                    <p class="title">停运申请</p>
                    <p><span class="lef">审核信息</span><span class="rig"><em>{{indexList.applyNum}}</em>条</span></p>
                </div>
            </div>
      </div>
    </div>
</template>
<script>
import { BASEURL } from "./../api/api";
import axios from "axios";
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  components: {
    swiper,
    swiperSlide
  },
  name: "login",
  data() {
    return {
      userInfor:{},
      swiperOption: {
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        direction: "horizontal",
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true
        },
        paginationClickable: true
      },
      indexList: {}
    };
  },
  methods: {
    goback(){//finishActivity
        window.AndroidAPI.finishActivity()
    },
    entranceBtn1() {
      this.$router.push({ path: "/" + "powerplant", force: true });
    },
    entranceBtn2() {
      this.$router.push({ path: "/" + "noticelist", force: true });
    },
    entranceBtn3() {
      this.$router.push({ path: "/" + "infoaudit", force: true });
    },
    entranceBtn4() {
      this.$router.push({ path: "/" + "monitorInformation", force: true });
    },
    init() {
      let _this = this;
      axios
        .get(BASEURL + "getIndex?areaCode=" + localStorage.getItem('areaCode'), {})
        .then(res=> {
          //this.$Message.warning(res.data.message);
          this.indexList = res.data;
          console.log(res.data)
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  computed: {
    
  },
  created(){
    var params = {};
    //this.$Message.warning(location.search)
    location.search.substr(1).split('&').forEach( function(item){
      var s = item.split('=');
      params[s[0]]=s[1];
    });
    //console.log('params',params)
    localStorage.setItem('areaCode',params.areaCode);
    localStorage.setItem('USER_ID',params.USER_ID);
    localStorage.setItem('USER_NAME',params.USER_NAME);
    
    this.init();
    /*
    if(window.AndroidAPI){
      this.$Message.warning('android');
      window.str = window.AndroidAPI.GetMemberInfo()
      let USER_ID = str.split(',')[0].split('=')[1]
      let ORG_REGION = str.split(',')[11].split('=')[1]
      let USER_NAME = str.split(',')[6].split('=')[1]
      let ACCOUNT = str.split(',')[2].split('=')[1]
      window.localStorage.setItem('USER_ID',USER_ID)
      window.localStorage.setItem('areaCode',ORG_REGION)
      window.localStorage.setItem('USER_NAME',USER_NAME)
      window.localStorage.setItem('ACCOUNT',ACCOUNT)
    } else {
      localStorage.setItem('areaCode','620000')
      this.init();
    }
    */
  },
  mounted() {
    
      
  }
};
</script>

